<template>
  <div class="questions-randoms">
    <el-card class="box-card">
      <el-row :gutter="20">
        <!-- 搜索框 -->
        <el-col class="questions-col">
          <span class="questions-text">关键字</span>
          <el-input v-model="qreryList.keyword"></el-input>
        </el-col>

        <!-- 清除 搜索 按钮 -->
        <el-col class="operation">
          <el-button type="primary" @click="getQuestionsList">搜索</el-button>
          <el-button @click="clearQuestions">清除</el-button>
        </el-col>
      </el-row>

      <!-- 提示栏 -->
      <el-alert
        :title="'数据一共' + counts + '条'"
        type="info"
        show-icon
        :closable="false"
      >
      </el-alert>

      <!-- 表格区域 -->
      <el-table style="width: 100%" :data="questionsList">
        <el-table-column label="编号" prop="id" width="200"> </el-table-column>
        <el-table-column label="题型" prop="questionType" width="80">
          <template slot-scope="scope">
            <span v-if="scope.row.questionType === '1'">单选</span>
            <span v-else-if="scope.row.questionType === '2'">多选</span>
            <span v-else>简答</span>
          </template>
        </el-table-column>
        <el-table-column label="题型编号" width="250">
          <template slot-scope="scope">
            <div
              v-for="(item, index) in scope.row.questionIDs"
              :key="index"
              class="questionIDs"
              @click="titleShow(item)"
            >
              {{ item.number }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="录入时间" prop="addTime" width="200">
        </el-table-column>
        <el-table-column label="答题时间(s)" prop="totalSeconds">
        </el-table-column>
        <el-table-column label="正确率" prop="accuracyRate"> </el-table-column>
        <el-table-column label="录入人" prop="userName"> </el-table-column>
        <el-table-column label="操作" class="operat-wrap" width="70">
          <template slot-scope="scope">
            <el-button
              type="danger"
              icon="el-icon-delete"
              circle
              @click="deleteQuestion(scope.row)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页器区域 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="qreryList.page"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="qreryList.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="counts"
      >
      </el-pagination>
    </el-card>

    <!-- 弹出层 -->
    <el-dialog
      title="题目预览"
      :visible.sync="questionDialogVisibleShow"
      minwidth="60%"
    >
      <questions-preview
        :item="item"
        v-if="questionDialogVisibleShow"
      ></questions-preview>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="questionDialogVisibleShow = false"
          >关 闭</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
// 导入 获取组题列表 组题列表删除 api
import { randoms, removeRandoms } from '@/api/hmmm/questions'
// 导入组题详情弹出层组件
import QuestionsPreview from '@/module-hmmm/components/questions-preview'
export default {
  name: 'Operation-Randoms',
  components: {
    'questions-preview': QuestionsPreview
  },
  props: {},
  data () {
    return {
      qreryList: {
        page: 1,
        pagesize: 10,
        keyword: ''
      },
      // 数据总条数
      counts: 0,
      // 组题列表
      questionsList: [],
      // 控制题目预览弹出层状态
      questionDialogVisibleShow: false,
      item: {}
    }
  },
  created () {
    this.getQuestionsList()
  },
  mounted () {},
  methods: {
    // 获取组题列表
    async getQuestionsList () {
      try {
        const { data: res } = await randoms(this.qreryList)
        this.counts = res.counts
        this.questionsList = res.items
      } catch (error) {
        this.$message('获取数据失败')
      }
    },

    // pagesize 改变时会触发
    handleSizeChange (newSize) {
      this.qreryList.pagesize = newSize
      this.getQuestionsList()
    },

    // page 改变时会触发
    handleCurrentChange (newPage) {
      this.qreryList.page = newPage
      this.getQuestionsList()
    },

    // 清除input
    clearQuestions () {
      this.qreryList.keyword = ''
      this.getQuestionsList()
    },
    // 删除组题
    async deleteQuestion (dataItem) {
      try {
        const result = await this.$confirm(
          '此操作将永久删除该学科, 是否继续?',
          '提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }
        ).catch((err) => err)
        if (result !== 'confirm') {
          return this.$message.info('取消删除')
        }
        await removeRandoms(dataItem)

        this.$message.success('删除成功')
        // 更新视图
        this.getQuestionsList()
      } catch (error) {
        this.message('删除失败')
      }
    },
    titleShow (item) {
      this.item = item
      this.questionDialogVisibleShow = true
    }
  },
  computed: {},
  watch: {},
  filters: {}
}
</script>

<style lang="scss" scoped>
.questions-randoms{
.el-form-item {
  display: flex;
}

.operation{
.el-button {
float: right;
margin-right: 10px;
}
}
.el-alert {
  margin: 16px 0;
}
.questionIDs {
  color: #279fff;
  cursor: pointer;
}

.questions-col {
  display: flex;
}
.questions-text {
  width: 65px;
  line-height: 38px;
}
.el-input {
  width: 220px;
}
.dialog-footer {
  .el-button {
    float: unset;
  }
}
}
.el-row {
  display: flex;
  justify-content: space-around;
}
.el-table {
  text-align: center;
}
.el-pagination{
margin-top: 10px;
}
</style>
